import Vue from "vue";
import VueRouter from "vue-router";
import Foo from "./components/Foo.vue";
import Bar from "./components/Bar.vue";
Vue.use(VueRouter);

// 前端路由的两种方式： hash， history
// hash： #
// 路由就是根据路径的不同渲染不同的组件， hash值特点是hash值变化不会导致页面重新渲染， 我们可以监控hash值得变化， 显示对应的组件（可以产生历史记录）； hashApi特点是丑（服务端不会接收hash值）
// historyApi是H5的api， 漂亮， 问题是刷新的时候会产生404

// 每个人访问服务器都需要产生一个路由系统
export default () => {
  let router = new VueRouter({
    mode: "history",
    routes: [
      {
        path: "/",
        // component: () => import("./components/Foo.vue"), // 懒加载， 根据路径动态加载对应的组件
        component: Foo, // 懒加载， 根据路径动态加载对应的组件
      },
      {
        path: "/bar",
        // component: () => import("./components/Bar.vue"), // 懒加载， 根据路径动态加载对应的组件
        component: Bar, // 懒加载， 根据路径动态加载对应的组件
      },
    ],
  });
  return router;
};
